<template>
  <div>
      <ul class="nav">
        <li class="nav-item">
            <router-link :to="{name: 'useRoute1',params: {id: 1}}" class="nav-link active" href="#">《1》route-link跳转方式，以对象参数的形式传参</router-link>
        </li>
         <li class="nav-item">
            <router-link :to="`/useRoute1/2`" class="nav-link active" href="#">《2》route-link跳转方式，以模板字符串的形式传参</router-link>
        </li>
        <li class="nav-item">
            <a class="nav-link" @click.prevent="goUseRoute2" href="#">《3》使用JavaScript跳转方式</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" @click.prevent="goUseRoute3" href="#">《4》不使用动态路由,使用name和params，可传参数，参数不在URL上</a>
            <a class="nav-link" @click.prevent="goUseRoute4" href="#">《5》不使用动态路由,使用path和params，不可传参</a>
            <a class="nav-link" @click.prevent="goUseRoute5" href="#">《6》不使用动态路由,使用name和query，可传参，参数在URL上</a>
            <a class="nav-link" @click.prevent="goUseRoute6" href="#">《7》不使用动态路由,使用path和query，可传参，参数在URL上</a>
        </li>
      </ul>
  </div>
</template>

<script lang="ts">
import {defineComponent} from 'vue'
import {useRouter} from 'vue-router'
export default defineComponent({
    components: {

    },
    setup() {
        const router = useRouter()
        const goUseRoute2 = ()=> {
            router.push({
                name: 'useRoute2',
                params: {
                    id: 3
                }
            })
        }
        const goUseRoute3 = ()=> {
            router.push({
                name: 'useRoute3',
                params: {
                    id: 48
                }
            })
        }
        const goUseRoute4 = ()=> {
            router.push({
                path: '/useRoute3',
                params: {
                    id: 49
                }
            })
        }
        const goUseRoute5 = ()=> {
            router.push({
                name: 'useRoute3',
                query: {
                    id: 50
                }
            })
        }
        const goUseRoute6 = ()=> {
            router.push({
                path: '/useRoute3',
                query: {
                    id: 51
                }
            })
        }
        return {
            goUseRoute2,
            goUseRoute3,
            goUseRoute4,
            goUseRoute5,
            goUseRoute6
        }
    }
})
</script>

<style>

</style>